<template>
  <el-select v-model="selectedOnlineState" style="width: 350px;" @change="handleChange">
    <el-option
      v-for="onlineState in onlineStateList"
      :key="onlineState.value"
      :label="onlineState.name"
      :value="onlineState.value"
    />
  </el-select>
</template>

<script>
  export default {
    name: 'SelectDeviceOnlineState',
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: { type: String, required: false, default: '' }
    },
    data() {
      return {
        selectedOnlineState: '',
        onlineStateList: []
      }
    },
    watch: {
      value() {
        this.selectedOnlineState = this.value
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.onlineStateList = [
          {
            name: '在线',
            value: 'ONLINE'
          },
          {
            name: '离线',
            value: 'OFFLINE'
          }
        ]
      },
      handleReset(){
        this.selectedOnlineState = ''
        this.handleChange()
      },
      handleChange(value) {
        this.$emit('change', value)
      }
    }
  }
</script>

<style scoped></style>
